.page {
    .theme-default-content code { 
        background: $bgCode 
        font-size: $font-size-xs
        line-height: $line-height-xs
        font-weight: 400
        vertical-align: middle
        padding: 2px 6px
        border-radius: $radius
        color: $textColor 
        margin: 1px 1px 1px 0
        white-space: nowrap;
    }

    .theme-default-content {
        .lg-code {
            display: inline-block;
            max-width: 100%;
            overflow-x: auto;
        }
        a > code,
        li > code,
        p > code {
            background: $onsurfaceColor 
            box-shadow: 0 0 0 1px $borderColor
        }

        a code {
            color: $linkColor
            transition: $t all ease-in-out
            white-space: pre-wrap;
            

            @media (hover: hover) {
                &:hover { 
                    text-decoration:none
                    color: $textColor
                }
            }
        }

        td code {
            white-space: nowrap
        }

        .language-bash:before { 
            display: none
        }
        div[class*="language-"] { 
            background: $editorColor
        }
        
        .source-code-link {
            padding: 2px 8px
            color: $text2Color
            //background: $sideColor
            border: 1px solid $borderColor
            border-radius: $radius
            top: -28px
            position: relative
            float: right
            font-size: $font-size-xs
            
            i { 
                display: inline-block
                vertical-align: text-top;
            }

            + p { 
                //margin-top: -28px 
            }

            @media (hover: hover) {
                &:hover { 
                    border-color: $linkColor
                }
            }

            @media (max-width: $medium) {
                position static
                float none
            }
        }

        pre { 
            margin-top: 16px
            background: $editorColor 
            padding: 16px 104px 16px 24px
            margin: 16px 0 0
            border-radius: $radius
            font-size: $font-size-s
            line-height: $line-height-s
            position: relative

            table {
                margin: 8px 0 24px
                width: auto

                tr:first-child {
                    td { 
                        border-top:0 !important
                    }
                }
                td, th { 
                    padding: 8px 16px
                }
            }

            .table-container {
                ul { 
                    margin-top: 8px
                    margin-left: 24px
                }
            }
        }

        .theme-code-group { 
            margin-top: 16px

            .theme-code-group__nav {
                padding: 8px
                margin: 0
                background: $editorHeadColor

                .theme-code-group__ul {
                    gap: 8px

                    .theme-code-group__li {
                        button {
                            padding: 6px 12px
                            margin:0
                            text-decoration: none
                            color: $text2Color
                            font-size: $font-size-xs
                            line-height: $line-height-xs
                            font-weight: 400
                            background: $onsurfaceColor
                            border-radius: $radius
                            border: 1px solid $lightBorderColor
                            transition: all $ts ease-in-out

                            &.theme-code-group__nav-tab-active {
                                font-weight: 400
                                border-bottom: 0
                                color: $textColor
                                background: white
                                border: 1px solid $lightBorderColor
                            }

                            @media (hover: hover) {
                                &:hover { 
                                    color: $textColor
                                }
                            }
                        }
                    }
                }
            }

            .theme-code-block  {
                pre {
                    margin: 0
                    border-top-left-radius: 0
                    border-top-right-radius: 0
                }
            }
        }
    }

    div[class*="language-"]::before { 
        display: none

        font-size: $font-size-xxs
        line-height: $line-height-xxs
        color: $text2Color
        top: 8px;
        right: -8px;
        padding: 8px;
        border-radius: $radius;
        background: $bgColor
    }
    .tabs-component {
        div[class*="language-"]::before {
            right: 8px
        }
    }

    .theme-default-content div[class*="language-"] {
        background: $editorColor 
        border-radius: $radius
        margin-bottom: 24px
        padding: 0

        @media (max-width: $small) {
            &:not(:first-child) {
                pre {
                    padding: 16px 104px 16px 16px
                    // padding-top: 60px
                }
            }
        }
    }

    @media (max-width: 419px) {
        div[class*="language-"] {
            margin:0
        }
    }
}

.theme-default-content pre code, 
.theme-default-content pre[class*="language-"] code {
    color: $textColor
    white-space: pre
}

.theme-code-block [class*="language-"] {
    &:has(.codeControls) {
        padding-top: 64px
    }
    .codeControls {
        padding: 8px 8px 8px 24px
        top:-52px
    }
}

[class*="language-"] {
    .copycode, .report, .github { 
        position: relative 
        transition: all $t ease-in-out !important
        padding: 8px !important
        z-index: 1
        color: $textColor
        background:  $editorColor

        i {
            opacity: .64
            transition: all $t ease-in-out

            + i {
                position absolute
                opacity 0
                inset 8px
            }
        }

        &.check {
            i {
                opacity 0

                + i {
                    opacity: .64
                }
            }
        }

        &:after {
            content: attr(aria-label)
            position absolute
            white-space: pre;
            top: 40px;
            left: 50%
            transform: translateX(-50%)
            padding:4px 8px
            border-radius: $radius
            background: black
            border: 1px solid black
            color: white
            opacity: 0
            transition: all $t ease-in-out
            font-size: $font-size-xs
            line-height: $line-height-xs
            pointer-events: none
        }

        @media (hover: hover) {
            &:hover:after  {
                opacity 1
            }
        }

        @media (hover: none) {
            opacity 1
        }
    }

    .report {
        padding: 8px 16px
        padding: 8px 16px
        border:none
        cursor: pointer
        border-radius: $radius
        border: 1px solid $lightBorderColor
        color: $textColor

        @media (hover: hover) {
            &:hover { 
                background: $borderColor 
                border: 1px solid $accentColor
            }
        }
    }
}
.codeControls {
    position absolute
    top: 0
    right: 0
    display: flex
    gap:10px
    transition: all $t ease-in-out !important
    z-index 1
    padding: 11px 11px 8px 0
    border-radius: $radius

    @media (max-width: $small) {
        position: absolute;
        right: -16px !important;
        left: -16px;
        width: auto;
        background: inherit;
        opacity 1
    }
}

pre + .codeControls {
    &:after { 
        content:''
        display: block
        position absolute
        top: 0
        right: 0
        width: 125%;
        height: 46px
        border-radius: 0 $radius $radius 0
        background: $editorColor 
        background: linear-gradient(90deg, rgba(247, 247, 249, 0) 0%, $editorColor 20%);
        pointer-events: none
    }
    
    @media (max-width: $small) {
        left: auto
        right: 0 !important
        background: none
    }
}


/*.tabs-component:has(.codeControls),
div[class*="language-"]:has(.codeControls),
.theme-code-group:has(.codeControls) {
    @media (hover: hover) {
        &:hover .codeControls { 
            opacity 1
        }
    }
}*/

.tabs-component-panel:has(.codeControls) {
    .codeControls { 
        padding: 0
        
       
    }

    @media (max-width: $small) {
        padding-top: 64px !important

        .codeControls {
            padding: 0 8px
            right: -16px !important;
            left: -16px;

            &:after {
                display: none
            }
        }
    }
}

.hideElement { 
    display: none !important
}

.page .select-type {
    height: 36px
    display: none

    > button {
        padding-right: 32px !important
        padding-left: 12px !important
        position: relative
        min-width: 128px;
        text-align: left;
        line-height: 18px;
        transition: all $t ease-in-out !important

        &.active {
            & + ul {
                visibility: visible
                opacity 1
            }
        }

        &:after {
            content: ''
            display: block
            width: 4px
            height: 4px
            border-left: 1px solid $textColor
            border-bottom: 1px solid $textColor
            transform: rotate(-45deg) translate(-50%)
            position absolute
            top: 10px
            right: 12px
            pointer-events: none
            z-index: 1
        }
    }

    ul { 
        opacity: 0
        visibility: hidden
        transition: all $t ease-in-out
        margin: 10px 0
        border-radius: $radius
        padding: 8px
        background: $borderColor

        li {
            list-style none

            button:not(.theme-code-group__nav-tab) {
                width: 100%
                border: none !important
                padding: 6px 12px
                background: none
                line-height: 22px
                text-align: left
                color: $text2Color
                transition: all $t ease-in-out

                &.active { 
                    background: $lightBorderColor
                    color: $textColor
                }

                @media (hover: hover) {
                    &:hover { 
                        color: $textColor
                    }
                }
            }
        }
    }

    @media (max-width: $medium) {
        .codeControls {
            display: none
        }
    }
}

.tabs-component-panel { 
    .codeControls {
        top: -44px
    }
}

div[class*="language-"] pre, 
div[class*="language-"] pre[class*="language-"] {
    background: $editorColor
    position: relative
}

output.console {
    margin: 8px 0
    padding: 8px 16px
    border-radius: $radius
    max-height: 240px;
    font-size: $font-size-xs
    line-height: $line-height-xs
    border: 1px solid $borderColor
    background: $sideColor
    white-space: pre-line;
    display: inline-block
    overflow-y: auto
    br { 
        display: block
    }

    &:last-child {
        margin-bottom: 0
    }

    &:empty {
        display: none
    }
}

#example1_events {
    height: 200px;
    padding: 8px;
    margin: 16px 0 16px;
    overflow-y: scroll;
    font-size: $font-size-xs
    line-height: $line-height-xs
    box-sizing: border-box;
    border-radius: $radius
    border:1px solid $borderColor

    div {
        padding: 8px 8px
        border-radius: $radius

        &:nth-child(odd) {
            background-color: $borderColor
        }
    }
}

#example1 {
  margin-top: 0;
}
#example3 .controls {
  margin: 0 0 16px;
  padding: 0;
}
#example3 .controls label {
  display: inline-block;
  padding: 4px 0;
}
#example3 .controls label input {
  margin-right: 8px;
}
#hooksList {
    padding: 0;
    height: 320px;
    overflow: auto;
}
#hooksList li {
    list-style: none;
    width: 33%;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: $font-size-xs
    line-height: $line-height-xs
}